<template>
  <div id="noteBox" ref="boxboxbox">   
    <div class="title">
      <span class="line"></span>
      <span>{{$t('wechat.bianqian')}}</span>
          <!-- <el-button style="float:right;margin-left:10px;margin-right:10px;margin-top:6px;color:#fff;" type="text" @click="printPdf"><i class="el-icon-scissors"></i> 截图</el-button> -->
    </div>
    <!-- <div v-show="showDe" class="searchBoxNote">
      <a-input-search
      v-model="searchWordValue"
      placeholder="输入关键字搜索便签"
      @search="init"
    />
    </div> -->
    <div v-if="!isIos">
  <div class="maxBoxNote" v-show="showDe">
    <div class="itemNote" @click="openNote(item)" v-for="(item,index) in tableData" :key="index">
      <div style="margin-right:10px;padding-top:10px;">
         <svg width="44" height="44" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34 10V4H8V38L14 35" stroke="#f5bd23" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M14 44V10H40V44L27 37.7273L14 44Z" fill="#f5bd23" stroke="#f5bd23" stroke-width="2" stroke-linejoin="round"/></svg>
      </div>
      <div style="width:300px;padding-top:10px;">
        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" :title="item.title">{{ item.title }}</div>
        <!-- <div  v-html="item.content" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;height: 20px;width:300px"></div> -->
        <div>{{ formate(item.notetime) }}</div>
      </div>
    </div>
  </div>
  <div class="maxBoxNote" v-show="!showDe">
    <div class="blackBox" >
      <i class="el-icon-arrow-left" style="cursor: pointer;" @click="back()"></i>
      <div :title="noteData.title!==''?noteData.title:'无标题'" style="text-align: center;width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ noteData.title!==''?noteData.title:'无标题' }}
      </div>
    </div>
      <div style="padding:10px;width: 100%;position: relative;padding-bottom:50px;" v-html="noteData.content"></div>
  </div>
    </div>
    <div v-if="isIos">
      <div class="maxBoxNote" v-show="showDe">
          <div class="itemNote" @click="openNoteIos(item)" v-for="(item,index) in tableData" :key="index">
            <div style="margin-right:10px">
                <svg t="1732247335425" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12937" width="44" height="44"><path d="M170.2 246.4h342.1s44.2-77.8 89.1-77.8h254.9c20.7 0 37.7 19.8 37.7 44l1.1 598.1c0 24.2-19.8 44-44 44h-681c-24.2 0-44-19.8-44-44V290.4c0.1-24.2 19.9-44 44.1-44z" fill="#694B4B" p-id="12938"></path><path d="M862.9 671.5l-688 38.3-22.2-406.4 688.1-59.3z" fill="#593F3F" p-id="12939"></path><path d="M870.8 671.8L242.2 707l-21.1-388 634.6-35.2z" fill="#593F3F" p-id="12940"></path><path d="M840.7 673.7L218.1 725l-21.9-383.4 623.4-55.9z" fill="#FFFFFF" p-id="12941"></path><path d="M807.9 715.1L178.6 750l-22.2-406.3 629.7-48.1z" fill="#F2F2F1" p-id="12942"></path><path d="M796 713.5l-619 36.3-22.1-406.3 618.8-40.1z" fill="#FFFFFF" p-id="12943"></path><path d="M895.2 425.1H509.1s-44.2-71.4-89.1-71.4H125.1c-20.7 0-38.9 16.3-38.9 36l40 429.2c0 19.7 19.8 35.8 44 35.8h685c24.2 0 44-16.1 44-35.8l40-358c0-19.7-19.8-35.8-44-35.8z" fill="#00B5FC" p-id="12944"></path></svg>
            </div>
            <div style="width:300px;">
              <div >{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="maxBoxNote" v-show="!showDe">
          <div v-if="showfile">
            <div class="blackBox" >
                <i class="el-icon-arrow-left" style="cursor: pointer;" @click="backIos()"></i>
                <div style="text-align: center;width: 300px;">{{ noteData.name!==''?noteData.name:'无标题' }}
                </div>
              </div>
              <div class="itemNote" @click="openNoteFile(item)" v-for="(item,index) in tableNote" :key="index">
              <div style="margin-right:10px">
              <svg width="44" height="44" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34 10V4H8V38L14 35" stroke="#f5bd23" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M14 44V10H40V44L27 37.7273L14 44Z" fill="#f5bd23" stroke="#f5bd23" stroke-width="2" stroke-linejoin="round"/></svg>
              </div>
              <div style="width:300px;">
                <div >{{ item.title }}</div>
                <div><span style="margin-left:100px;">{{ formate(item.notetime) }}</span></div>
              </div>
            </div>
          </div>
          
          <div v-if="!showfile">
            <div class="blackBox" >
                <i class="el-icon-arrow-left" style="cursor: pointer;" @click="backFile()"></i>
                <div style="text-align: center;width: 300px;">{{ iosData.title!==''?iosData.title:'无标题' }}
                </div>
              </div>
            <!-- <i class="el-icon-arrow-left" style="cursor: pointer;" @click="back()"></i>
            <div style="text-align: center;width: 300px;">{{ noteData.title!==''?noteData.title:'无标题' }}
            </div> -->
            <div>内容：{{iosData.content}}</div>
            <div style="border-bottom:1px solid #ccc" v-for="(item,index) in tableFile" :key="index">
              <div style="width:300px;padding:0 10px">
                <div >文件名：{{ item.name }}</div>
                <br>
                <br>
                <div>文件路径：{{item.path}}</div>
                <br>
                <a :href="item.path" v-if="!isImageFile(item.name)" target="_blank" download>{{item.name}}</a>
                <img v-if="isImageFile(item.name)" width="200" @click="openImg(item.path)" height="200"  :src="item.path" alt="">
              </div>
              <br>
            </div>
          </div>
            <!-- <div style="padding:10px;width: 100%;position: relative;padding-bottom:50px;" v-html="noteData.content"></div> -->
        </div>
    </div>

  <!-- 无法解析消息类型详情 -->
   <a-modal
      v-model="showModal"
      :footer="null"
      width="80%"
      title="消息详情"
      :maskClosable="false"
      :getContainer="getRefsAff"
      centered
      @ok="() => (showModal = false)"
    >
      <span>{{dataContent}}</span>
    </a-modal>

    <!-- 提交标记 -->
    <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
      :maskClosable="false" title="提示" @ok="handleOk">
      <p>{{$t('wechat.biaojibeizhu')}}</p>
      <p><el-input type="textarea" v-model="remark"></el-input></p>
    </a-modal>
    
  </div>
</template>

<script>
import { getPhoneNoteApi } from '@/api/baseInfo/base_api'
import { parseTime } from "@/utils/index"
import print from 'print-js'
import html2canvas from "html2canvas"
import { sendMarkOrderApi,getPhoneIosNoteApi } from '@/api/markApi/index'
import Fuse from 'fuse.js';

import ScreenShort from "js-web-screen-shot";
export default {
  name: "note2",
  props:['sendData'],
  data(){
    return{
      tableFile:[],
      iosData:'',
      showfile:true,
      searchWordValue:'',
      noteData:'',
      showDe:true,
      showRemark:false,
      remark:'',
      id:'',
      tableData:[],
      offset:1,
      showModal:false,
      dataContent:'',
      isIos:false,
      tableNote:[]
    }
  },
  watch:{
    '$store.state.account.note2':function(){
      this.offset=1
      this.showDe = true;
      this.showfile = true;
      this.tableData=[]
      if(sessionStorage.getItem('nodeType') == "iOS手机"){
        this.isIos = true;
      }else{
        this.isIos = false;
      }
      this.init()
    }
  },
  created(){
      this.showDe = true;
      this.showfile = true;
     if(sessionStorage.getItem('nodeType') == "iOS手机"){
        this.isIos = true;
      }else{
        this.isIos = false;
      }
    this.init()
  },
  methods:{
  isImageFile(fileName) {
      const imageExtensions = [
          '.bmp', '.jpg', '.jpeg', '.png', '.tif', '.tiff', '.gif', '.pcx', '.tga', '.exif', '.fpx', 
          '.svg', '.psd', '.cdr', '.pcd', '.dxf', '.ufo', '.eps', '.ai', '.raw', '.wmf', '.webp', '.avif', '.apng'
      ];
      const lowerCaseFileName = fileName.toLowerCase();

      return imageExtensions.some(extension => lowerCaseFileName.endsWith(extension));
  },
  
  openImg(path){
    window.open(path,"_blank");
  },
    back(){
      this.noteData = '';
      this.showDe = true;
    },
    backIos(){
      this.noteData = '';
      this.showDe = true;
    },
    backFile(){
      this.iosData = '';
      this.showfile = true;
    },
    openNote(item){
      this.noteData = item;
      this.showDe = false;
    },
    openNoteIos(item){
       let data1={
            proof_num:this.sendData.proof_num,
            model:this.sendData.model,
            note_type: "note",
            key_id:String(item.key_id)
          }
        getPhoneIosNoteApi(data1).then(res=>{
            console.log(res.data) 
            this.tableNote = res.data;
        })
      this.noteData = item;
      this.showDe = false;
    },
    openNoteFile(item){
      this.iosData = null;
      this.iosData = item;
      let data1={
            proof_num:this.sendData.proof_num,
            model:this.sendData.model,
            note_type: "file",
            key_id:String(item.key_id)
          }
        getPhoneIosNoteApi(data1).then(res=>{
            console.log(res.data)
            this.tableFile = res.data;
        })
      this.showfile = false;
      console.log(this.iosData)
    },
    getRefsAff(){
      return  this.$refs.callBosMain;
    },
    handleOk(){
        let data={
        model:this.sendData.model,
        isChat:0,
        proof_num:this.sendData.proof_num,
        list_offset:this.offset,
        list_limit:this.limit,
        remark:this.remark,
        class:this.sendData.class,
        label:this.sendData.label,
        id:Number(this.id)
      }
      sendMarkOrderApi(data).then(res=>{
        this.showRemark=false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.onSearch()
      })
    },
    // 添加标记点
    markOrder(item){
      this.id=item.id;
      this.showRemark=true;
    },
    open(content){

     
      this.showModal=true
      this.dataContent=content
    },
    getRefsAff(){
      return  this.$refs.boxboxbox
    },
    init(){
      console.log(this.isIos);
      if(this.isIos){
        let data1={
            proof_num:this.sendData.proof_num,
            model:this.sendData.model,
            note_type: "dir",
            
          }
        getPhoneIosNoteApi(data1).then(res=>{
            console.log(res.data)
            this.tableData = res.data;
        })
      }else{
      if(this.searchWordValue){
        let data={
          proof_num:this.sendData.proof_num,
          model:this.sendData.model,
        }
        getPhoneNoteApi(data).then(res=>{
          let arr = []
          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
            if(String(element.content).indexOf(this.searchWordValue)!==-1 || String(element.title).indexOf(this.searchWordValue)!==-1)
                arr.push(element);
            }
          this.tableData = arr;
        })
      }else{
        let data={
          proof_num:this.sendData.proof_num,
          model:this.sendData.model,
        }
        getPhoneNoteApi(data).then(res=>{
          this.tableData=res.data
        })
      }
      }
      
      

    },
    formate(date){
      return parseTime(date)
    },
    //打印
    printPdf(){

      new ScreenShort({
        enableWebRtc: true, // 是否启用webrtc，值为false则使用html2canvas来截图
        loadCrossImg: true, // 跨域
        level: 999999999999999, // 层级
        // dpi: currentScale, // 设置 DPI
        // clickCutFullScreen:false,
        // wrcWindowMode:true
        
      });
      return
      html2canvas(document.getElementById('noteBox')).then(function(canvas) {
          var imgageData = canvas.toDataURL("image/png");//把canvas转为base64图片
          print(imgageData, 'image');
      });
    },
  }

}
</script>

<style scoped>
a {
  text-decoration: underline;
}
a:hover {
  color: #ff6347; /* 鼠标悬停时改变颜色，例如设置为番茄色 */
  text-decoration: underline; /* 悬停时仍保持下划线 */
}

.searchBoxNote{
  height: 50px;
  
}
.maxBoxNote::-webkit-scrollbar {
  width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.maxBoxNote::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.maxBoxNote::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.blackBox{
  
  display: flex;
  height: 50px;
  align-items: center;
  padding: 0 15px;
  font-size: 20px;
  border-bottom: 1px solid #dcdcdc;
}
.maxBoxNote{
  height: 100vh;
  overflow-y: auto;
}
.itemNote{
  height: 70px;
  border-bottom: 1px solid rgb(232, 232, 232);
  padding: 0 20px 0 10px;
  cursor: pointer;
  display: flex;
}
.itemNote:hover{
  /* background: #f0f0f0; */
  color: rgb(13, 184, 252);
  font-weight: bold;
}
.badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
}
#noteBox{
  position: relative;
}
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 10px;
  font-size:15px;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}
</style>